<!-- example.vue -->
<template>
  <div id="app">
    <div class="component-wrap">
      <vue-complier-template v-model="codeValue" />
      <div class="show-code" @click="showCode = !showCode">
        {{ showCode ? "隐藏代码" : "展开代码" }}
      </div>
    </div>
    <transition name="el-zoom-in-top">
      <div class="editor-wrap" v-show="showCode">
        <code-editor
          border_radius="0"
          width="100%"
          height="60vh"
          style="overflow-y: auto"
          v-model="codeValue"
        />
      </div>
    </transition>
  </div>
</template>

<script>
import CodeEditor from "simple-code-editor";
import axios from "axios";
export default {
  name: "App",
  components: { CodeEditor },
  data: () => ({ codeValue: "", showCode: true }),
  created() {
    axios.get("/vue-compiler-template-example/origin-code.md").then((rsp) => {
      this.codeValue = rsp.data;
    });
  },
};
</script>
<style>
#app {
  height: 80%;
  width: 800px;
  margin: 0 auto;
}
.show-code {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  color: rgb(107, 107, 192);
  font-weight: bold;
  cursor: pointer;
  background: #f8f8f8;
}
.component-wrap {
  box-shadow: 0 0 0 1px #efefef;
  height: 40vh;
  display: flex;
  flex-direction: column;
}
.component-wrap > div:first-of-type {
  flex-grow: 1;
  padding: 20px;
  overflow-y: auto;
}
</style>
